<template>
  <a-modal
    :title="$t('更多条件')"
    wrapClassName="custom-set-column"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="close"
  >
    <a-spin :spinning="confirmLoading">
      <a-row :gutter="24" type="flex" justify="center">
        <a-col :span="18" ref="setcolLeft" class="column-condition">
          <a-checkbox-group v-model="curSecConds" style="width: 100%">
            <div style="font-weight: 900; color: #000">{{$t('全部数据项')}}</div>
            <div v-for="(group, index) in setcondsgroup" :key="index">
              <div style="font-weight: 900; color: #000; display: flex; align-items: center; padding-top: 10px">
                <div
                  style="width: 6px; height: 6px; border-radius: 100%; background-color: #000; margin-right: 4px"
                ></div>
                {{ $t(group.name) }}
              </div>
              <div style="padding: 0 10px">
                <a-checkbox
                  v-for="(col, ind) in group.bisQueryItemList"
                  :key="ind"
                  :value="col.columnId"
                  :style="{ width: 100 / group.col + '%', 'padding-top': '10px', 'box-sizing': 'border-box','vertical-align':'top' }"
                  >{{ $t(col.columnName) }}</a-checkbox
                >
              </div>
            </div>
          </a-checkbox-group>
        </a-col>
        <a-col :span="6" ref="setcolRight" class="column-condition" style="border-left: 1px solid #ccc">
          <div style="font-weight: 900; color: #000">{{$t('当前已选定数据项')}}</div>
          <div style="color: orange">{{$t('说明：拖拽可改变字段的显示顺序')}}</div>
          <div style="height:537px;overflow-y:auto;">
            <div>
              <div
                v-for="(seccol, ind) in selectConds"
                :key="ind"
                class="check-col"
                draggable="true"
                @dragstart="drag($event, ind)"
                @drop="drop($event, ind)"
                @dragover="allowDrop($event)"
              >
                <span><a-icon type="unordered-list" style="padding-right: 6px" />{{ $t(seccol.columnName) }}</span
                ><a-icon type="close" style="font-size: 18px; color: #1890ff" @click="delCols(seccol, ind)" />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <template slot="footer">
      <a-button type="default" @click="resetCols">{{$t('取消')}}</a-button>
      <a-button type="primary" @click="save">{{$t('确定')}}</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'MoreCondModal',
  props: {
    setconds: Array, //全部条件
    setcondsgroup: Array,
    secConds: Array
  },
  data() {
    return {
      width: 1240,
      visible: false,
      confirmLoading: false,
      //显示的列
      showConds: [],
      //设置列里已选择的列
      selectConds: [],
      curSecConds: [], //复选框选中列表
      secHeight: null,
    }
  },
  watch: {
    curSecConds(newVal) {
      this.selectConds.forEach((sc, ind) => {
        let x = newVal.findIndex((nv) => {
          return nv == sc.columnId
        })
        if (x == -1) {
          this.selectConds.splice(ind, 1)
        }
      })
      newVal.forEach((nv) => {
        let x = this.selectConds.findIndex((sc) => {
          return sc.columnId == nv
        })
        let y = this.setconds.findIndex((sc) => {
          return sc.columnId == nv
        })
        if (x == -1) {
          this.selectConds.push(this.setconds[y])
        }
      })
    },
  },
  methods: {
    edit: function () {
      let that = this
      that.visible = true
      that.showConds = that.secConds.slice()
      that.selectConds = that.showConds.slice() //复制数组
      that.curSecConds = that.showConds.map((item, index) => {
        return item.columnId
      })
      setTimeout(function () {
        that.$refs.setcolRight.$el.height = that.$refs.setcolLeft.$el.offsetHeight
        that.secHeight = that.$refs.setcolLeft.$el.offsetHeight - 90
      }, 0)
    },
    drag(event, index) {
      event.dataTransfer.setData('index', index)
    },
    drop(event, index) {
      event.preventDefault()
      let that = this
      let startIndex = parseInt(event.dataTransfer.getData('index'))
      let currentIndex = parseInt(index)
      if (startIndex - currentIndex > 0) {
        that.selectConds.splice(currentIndex, 0, that.selectConds[startIndex])
        that.selectConds.splice(startIndex + 1, 1)
      } else if (startIndex - currentIndex < 0) {
        that.selectConds.splice(currentIndex + 1, 0, that.selectConds[startIndex])
        that.selectConds.splice(startIndex, 1)
      }
      let sortList = that.selectConds
        .map((item) => {
          return item.sort
        })
        .sort(function (a, b) {
          return a - b
        })
      that.selectConds.forEach((sc, i) => {
        sc.sort = sortList[i]
      })
    },
    allowDrop(event) {
      event.preventDefault()
    },
    delCols(item) {
      this.curSecConds = this.curSecConds.filter((cs) => {
        return cs != item.columnId
      })
    },
    resetCols: function () {
      let that = this
      let data=[];
      that.curSecConds.forEach(cs=>{
        data.push(that.setconds.filter(sc=>{return sc.columnId==cs})[0])
      })
      that.$emit('setCond',data)
      that.visible = false
    },
    save: function () {
      let that = this
      let data=[];
      that.selectConds.forEach(cs=>{
        data.push(that.setconds.filter(sc=>{return sc.columnId==cs.columnId})[0])
      })
      that.$emit('setCond',data)
      that.visible = false
    },
    close: function () {
      let that = this
      that.visible = false
    },
  },
}
</script>
<style>
.custom-set-column .ant-modal-body {
  padding: 0 24px;
}
.column-condition {
  padding: 24px 0;
  box-sizing: border-box;
}
.column-condition .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}
.check-col {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.check-col:hover,
.check-col:focus,
.check-col:active {
  background-color: #daf2fd;
}
</style>